<!--
 * @Description:
 * @Author: dh
 * @Date: 2021-08-19 17:18:39
 * @LastEditors: dh
 * @LastEditTime: 2023-09-11 15:13:07
-->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>二栏布局--float结合overflow</title>
	</head>
	<style>
		* {
			margin: 0;
		}

		.main {
			min-width: 1020px;
		}

		hr {
			margin: 20px;
		}

		.main1 .side {
			float: left;
			width: 200px;
			height: 100px;
			background: teal;
		}

		.main1 .content {
			overflow: hidden;
			background-color: tan;
		}

		.main2 .side {
			float: right;
			width: 200px;
			height: 100px;
			background: teal;
		}

		.main2 .content {
			height: 200px;
			overflow: hidden;
			background-color: tan;
		}
	</style>

	<body>
		<!-- 不管侧边栏在做还是在右，元素都在content前面 -->
		<div class="main main1">
			<div class="side">侧边栏-float</div>
			<div class="content">
				内容-overflow Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam optio sed dolorem hic odio laboriosam iusto architecto asperiores
				aperiam! Quas saepe possimus sunt blanditiis, quam ratione pariatur quisquam beatae architecto asperiores aperiam! Quas saepe possimus sunt
				blanditiis, quam ratione pariatur quisquam beatae architecto asperiores aperiam! Quas saepe possimus sunt blanditiis, quam ratione pariatur
				quisquam beatae architecto asperiores aperiam! Quas saepe possimus sunt blanditiis, quam ratione pariatur quisquam beatae architecto
				asperiores aperiam! Quas saepe possimus sunt blanditiis, quam ratione pariatur quisquam beatae architecto asperiores aperiam! Quas saepe
				possimus sunt blanditiis, quam ratione pariatur quisquam beatae libero?
			</div>
		</div>

		<hr />

		<div class="main main2">
			<div class="side">侧边栏-float</div>
			<div class="content">
				内容-overflow Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam optio sed dolorem hic odio laboriosam iusto architecto asperiores
				aperiam! Quas saepe possimus sunt blanditiis, quam ratione pariatur quisquam beatae architecto asperiores aperiam! Quas saepe possimus sunt
				blanditiis, quam ratione pariatur quisquam beatae architecto asperiores aperiam! Quas saepe possimus sunt blanditiis, quam ratione pariatur
				quisquam beatae architecto asperiores aperiam! Quas saepe possimus sunt blanditiis, quam ratione pariatur quisquam beatae architecto
				asperiores aperiam! Quas saepe possimus sunt blanditiis, quam ratione pariatur quisquam beatae architecto asperiores aperiam! Quas saepe
				possimus sunt blanditiis, quam ratione pariatur quisquam beatae libero?
			</div>
		</div>
	</body>
</html>
